import { Input } from "antd"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"
import { notAllowSpecialCharacters } from "@/utils/validate"

interface ClubNameInputProps {
	isHideLabel?: boolean
	onChange?: (text: string) => void
}

const ClubNameInput: FC<ClubNameInputProps> = ({ isHideLabel = false, onChange }) => {
	const { newFormat } = useLocale()

	const onNotAllow = (value: string) => {
		onChange && onChange(value)
	}

	return (
		<SFormItem name="clubName" label={isHideLabel ? "" : newFormat("dxn.card_ables_list.club_name")}>
			<Input
				placeholder={newFormat("dxn.card_ables_list.club_name_placeholder")}
				allowClear
				onChange={e => notAllowSpecialCharacters(e, onNotAllow)}
			/>
		</SFormItem>
	)
}

export default ClubNameInput
